<template>
  <div class="pb-20 flex flex-col items-center">
    <!-- 站点信息头部 -->
    <div class="bg-white w-full max-w-md p-4 mb-4">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
          <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 10h6m-6 4h6"/>
            <circle cx="8" cy="8" r="1" fill="currentColor"/>
            <circle cx="16" cy="8" r="1" fill="currentColor"/>
          </svg>
        </div>
        <h1 class="text-lg font-bold text-gray-900">上海浦东充电站</h1>
      </div>
    </div>

    <!-- 设备统计概览 -->
      <div class="bg-white w-full max-w-md rounded-2xl p-4 mb-4">
      <div class="grid grid-cols-3 gap-4 text-center">
        <div @click.stop="selectSuperCharger" 
             class="rounded-lg p-3 cursor-pointer transition-colors" 
             :class="superChargerSelected ? 'bg-red-300' : 'bg-red-50'">
          <div class="text-2xl font-bold" :class="superChargerSelected ? 'text-red-900' : 'text-red-600'">0</div>
          <div class="text-xs text-gray-600 mt-1">超充桩</div>
        </div>
        <div @click.stop="selectFastCharger" 
             class="rounded-lg p-3 cursor-pointer transition-colors" 
             :class="fastChargerSelected ? 'bg-blue-300' : 'bg-blue-50'">
          <div class="text-2xl font-bold" :class="fastChargerSelected ? 'text-blue-900' : 'text-blue-600'">6</div>
          <div class="text-xs text-gray-600 mt-1">快充桩</div>
        </div>
        <div @click.stop="selectSlowCharger" 
             class="rounded-lg p-3 cursor-pointer transition-colors" 
             :class="slowChargerSelected ? 'bg-green-300' : 'bg-green-50'">
          <div class="text-2xl font-bold" :class="slowChargerSelected ? 'text-green-900' : 'text-green-600'">8</div>
          <div class="text-xs text-gray-600 mt-1">慢充桩</div>
        </div>
      </div>
    </div>

    <!-- 设备列表 -->
    <div class="w-full max-w-md space-y-4 box-border overflow-hidden">
      <!-- 超充桩 -->
      <div class="bg-white rounded-2xl overflow-hidden box-border">
        <div @click.stop="toggleSuperCharger" class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors">
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-red-500 rounded-full"></div>
            <h2 class="font-medium text-gray-900">超充桩</h2>
          </div>
          <svg :class="{'rotate-180': superChargerSelected}" class="w-5 h-5 text-gray-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
          </svg>
        </div>
        
        <div v-show="superChargerSelected" class="px-4 pb-4 box-border overflow-hidden">
          <!-- 无桩友好提示 -->
          <div v-if="getSuperChargerCount() === 0" class="text-center py-8">
            <!-- 标题 -->
            <div class="text-gray-900 font-medium text-base mb-2">暂无超充桩</div>
            <!-- 描述 -->
            <div class="text-gray-500 text-sm">该站点目前没有安装超充桩设备</div>
          </div>
          <div v-else class="space-y-3">
            <div v-for="i in getSuperChargerCount()" :key="`super-${i}`" class="border border-gray-200 rounded-lg p-3 box-border">
              <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-3">
                  <div class="w-8 h-8 bg-gradient-to-br from-red-100 to-red-200 rounded-xl flex items-center justify-center shadow-sm">
                    <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M17 8l2 2m0 0l2 2m-2-2v4m-4 2H7m4-6l2-2m0 0l2 2m-2-2v4"/>
                    </svg>
                  </div>
                  <div class="font-semibold text-gray-900">超充桩 #{{ i.toString().padStart(2, '0') }}</div>
                </div>
                <div class="flex items-center gap-2">
                  <button @click.stop="restartPile('fast', i)" class="px-3 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-full border border-orange-200 hover:bg-orange-100 transition-colors">
                    重启
                  </button>
                  <div class="flex items-center gap-2 px-3 py-1 bg-green-50 rounded-full border border-green-200">
                    <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    <span class="text-xs font-medium text-green-700">在线</span>
                  </div>
                </div>
              </div>
              
              <div class="bg-gray-50 rounded p-2 mb-3">
                <div class="text-xs font-medium text-gray-900">设备编码: 202590182309128309</div>
              </div>

              <div class="grid grid-cols-2 gap-2 mb-3">
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">品牌</div>
                  <div class="text-xs font-medium text-gray-900">睿讯微</div>
                </div>
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">型号</div>
                  <div class="text-xs font-medium text-gray-900">睿讯微交流双枪-14kw</div>
                </div>
              </div>

              <div class="grid grid-cols-2 gap-2 mb-3">
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">最大功率</div>
                  <div class="text-xs font-medium text-gray-900">120kW</div>
                </div>
                <div class="bg-gray-50 rounded p-2 cursor-pointer hover:bg-gray-100 transition-colors" @click.stop="openPricingModal('super')">
                  <div class="text-xs text-gray-500">计费规则</div>
                  <div class="text-xs font-medium text-gray-900 flex items-center gap-1">
                    <span>点击查看详情</span>
                    <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="grid grid-cols-2 gap-2 mb-3">
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">运营状态</div>
                  <div class="text-xs font-medium text-gray-900">正常运营</div>
                </div>
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">桩管理状态</div>
                  <div class="text-xs font-medium text-gray-900">投运</div>
                </div>
              </div>

              <!-- 枪信息 -->
              <div class="space-y-3">
                <div v-for="gun in getSuperChargerGuns(i)" :key="gun.id" class="bg-gray-50 rounded-lg p-3 border border-gray-200">
                  <!-- 第一行：左侧枪图标和枪名，右侧枪状态 -->
                  <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-2">
                      <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center">
                        <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2L12 6M8 6L16 6C17.1 6 18 6.9 18 8L18 14C18 15.1 17.1 16 16 16L8 16C6.9 16 6 15.1 6 14L6 8C6 6.9 6.9 6 8 6zM12 16L12 22M9 19L15 19"/>
                        </svg>
                      </div>
                      <span class="font-medium text-sm text-gray-900">{{ gun.name }}</span>
                    </div>
                    <div :class="['flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs', gun.status === 'idle' ? 'bg-green-50 border-green-200' : gun.status === 'charging' ? 'bg-orange-50 border-orange-200' : 'bg-red-50 border-red-200']">
                      <div :class="['w-1.5 h-1.5 rounded-full', gun.status === 'idle' ? 'bg-green-500' : gun.status === 'charging' ? 'bg-orange-500' : 'bg-red-500']"></div>
                      <span :class="['font-medium', gun.status === 'idle' ? 'text-green-700' : gun.status === 'charging' ? 'text-orange-700' : 'text-red-700']">
                        {{ gun.status === 'idle' ? '在线' : gun.status === 'charging' ? '充电中' : '故障' }}
                      </span>
                    </div>
                  </div>
                  
                  <!-- 第二行：左侧编号和功率，右侧二维码 -->
                  <div class="flex items-center justify-between">
                    <div class="flex-1">
                      <div class="text-xs text-gray-600 mb-1">编号: {{ gun.qrCode }}</div>
                      <div class="text-xs text-gray-600">功率: {{ gun.power }}</div>
                    </div>
                    <div @click.stop="showQRCode('super', i, gun.id)" class="cursor-pointer p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
                      <svg class="w-7 h-7 text-gray-500 hover:text-gray-700" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path d="M149.897707 387.566843l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425L393.707231 143.757319C393.707231 94.273016 353.614109 54.179894 304.491005 54.179894L149.897707 54.179894c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099C60.320282 347.473721 100.774603 387.566843 149.897707 387.566843zM136.533333 143.757319c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374l0 154.232099c0 7.223986-6.140388 13.364374-13.364374 13.364374L149.897707 311.353792c-7.223986 0-13.364374-6.140388-13.364374-13.364374L136.533333 143.757319z" fill="currentColor"/>
                        <path d="M304.491005 628.486772 149.897707 628.486772c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099c0 49.484303 40.093122 89.577425 89.577425 89.577425l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425l0-154.232099C393.707231 668.579894 353.614109 628.486772 304.491005 628.486772zM317.49418 872.296296c0 7.223986-6.140388 13.364374-13.364374 13.364374L149.897707 885.66067c-7.223986 0-13.364374-6.140388-13.364374-13.364374l0-154.232099c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374L317.49418 872.296296z" fill="currentColor"/>
                        <path d="M878.797884 54.179894l-154.232099 0c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099c0 49.484303 40.093122 89.577425 89.577425 89.577425l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425L968.375309 143.757319C968.014109 94.273016 927.920988 54.179894 878.797884 54.179894zM891.801058 297.989418c0 7.223986-6.140388 13.364374-13.364374 13.364374l-154.232099 0c-7.223986 0-13.364374-6.140388-13.364374-13.364374L710.840212 143.757319c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374L891.801058 297.989418z" fill="currentColor"/>
                        <path d="M673.997884 552.273721c19.865961 0 36.119929-15.892769 35.75873-36.119929 0-19.865961-15.892769-36.119929-36.119929-36.119929l-126.058554 0L547.578131 338.443739c0-19.865961-15.892769-36.119929-36.119929-35.75873-19.865961 0-36.119929 15.892769-36.119929 36.119929L475.338272 480.395062 96.440212 480.395062c-19.865961 0-36.119929 15.892769-36.119929 36.119929 0 19.865961 15.892769 36.119929 36.119929 36.119929l379.620459 0 0 169.04127c0 19.865961 15.892769 36.119929 36.119929 36.119929s36.119929-15.892769 36.119929-36.119929l0-169.04127L673.997884 552.634921z" fill="currentColor"/>
                        <path d="M932.255379 552.273721c19.865961 0 36.119929-15.892769 35.75873-36.119929 0-19.865961-15.892769-36.119929-36.119929-36.119929l-79.825044 0c-19.865961 0-36.119929 15.892769-36.119929 36.119929 0 19.865961 15.892769 36.119929 36.119929 36.119929L932.255379 552.273721z" fill="currentColor"/>
                        <path d="M511.8194 166.874074c19.865961 0 36.119929-15.892769 36.119929-36.119929L547.93933 88.855026c0-19.865961-15.892769-36.119929-36.119929-35.75873-19.865961 0-36.119929 15.892769-36.119929 36.119929l0 41.899118C476.06067 150.620106 491.953439 166.874074 511.8194 166.874074z" fill="currentColor"/>
                        <path d="M511.8194 849.179541c-19.865961 0-36.119929 15.892769-36.119929 36.119929l0 41.899118c0 19.865961 15.892769 36.119929 36.119929 36.119929s36.119929-15.892769 36.119929-36.119929l0-42.260317C547.93933 865.07231 531.685362 849.179541 511.8194 849.179541z" fill="currentColor"/>
                        <path d="M892.884656 871.573898c0 7.223986-6.140388 13.003175-13.003175 13.003175l-38.648325 0 0 75.129453 38.648325 0c48.761905 0 88.493827-39.731922 88.493827-88.493827l0-43.705115-75.129453 0L893.245855 871.573898z" fill="currentColor"/>
                        <path d="M879.520282 631.015168l-152.426102 0c-48.761905 0-88.493827 39.731922-88.493827 88.493827l0 152.426102c0 48.761905 39.731922 88.493827 88.493827 88.493827l38.648325 0L765.742504 884.938272l-38.648325 0c-7.223986 0-13.003175-6.140388-13.003175-13.003175l0-152.426102c0-7.223986 6.140388-13.003175 13.003175-13.003175l152.426102 0c7.223986 0 13.003175 6.140388 13.003175 13.003175l0 33.591534L968.014109 753.100529l0-33.591534C968.014109 670.74709 928.282187 631.015168 879.520282 631.015168z" fill="currentColor"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快充桩 -->
      <div class="bg-white rounded-2xl overflow-hidden box-border">
        <div @click.stop="toggleFastCharger" class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors">
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
            <h2 class="font-medium text-gray-900">快充桩</h2>
          </div>
          <svg :class="{'rotate-180': fastChargerSelected}" class="w-5 h-5 text-gray-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
          </svg>
        </div>
        
        <div v-show="fastChargerSelected" class="px-4 pb-4 box-border overflow-hidden">
          <!-- 无桩友好提示 -->
          <div v-if="getFastChargerCount() === 0" class="text-center py-8">
            <!-- 标题 -->
            <div class="text-gray-900 font-medium text-base mb-2">暂无快充桩</div>
            <!-- 描述 -->
            <div class="text-gray-500 text-sm">该站点目前没有安装快充桩设备</div>
          </div>
          <div v-else class="space-y-3">
            <div v-for="i in getFastChargerCount()" :key="`fast-${i}`" class="border border-gray-200 rounded-lg p-3 box-border">
              <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-3">
                  <div class="w-8 h-8 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center shadow-sm">
                    <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M17 8l2 2m0 0l2 2m-2-2v4m-4 2H7m4-6l2-2m0 0l2 2m-2-2v4"/>
                    </svg>
                  </div>
                  <div class="font-semibold text-gray-900">快充桩 #{{ i.toString().padStart(2, '0') }}</div>
                </div>
                <div class="flex items-center gap-2">
                  <button @click.stop="restartPile('fast', i)" class="px-3 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-full border border-orange-200 hover:bg-orange-100 transition-colors">
                    重启
                  </button>
                  <div class="flex items-center gap-2 px-3 py-1 bg-green-50 rounded-full border border-green-200">
                    <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    <span class="text-xs font-medium text-green-700">在线</span>
                  </div>
                </div>
              </div>
              
              <div class="bg-gray-50 rounded p-2 mb-3">
                <div class="text-xs font-medium text-gray-900">设备编码: 20259018230912831{{ i }}</div>
              </div>

              <div class="grid grid-cols-2 gap-2 mb-3">
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">品牌</div>
                  <div class="text-xs font-medium text-gray-900">特来电</div>
                </div>
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">型号</div>
                  <div class="text-xs font-medium text-gray-900">特来电直流快充-60kw</div>
                </div>
              </div>

              <div class="grid grid-cols-2 gap-2 mb-3">
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">最大功率</div>
                  <div class="text-xs font-medium text-gray-900">60kW</div>
                </div>
                <div class="bg-gray-50 rounded p-2 cursor-pointer hover:bg-gray-100 transition-colors" @click.stop="openPricingModal('fast')">
                  <div class="text-xs text-gray-500">计费规则</div>
                  <div class="text-xs font-medium text-gray-900 flex items-center gap-1">
                    <span>点击查看详情</span>
                    <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="grid grid-cols-2 gap-2 mb-3">
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">运营状态</div>
                  <div class="text-xs font-medium text-gray-900">正常运营</div>
                </div>
                <div class="bg-gray-50 rounded p-2">
                  <div class="text-xs text-gray-500">桩管理状态</div>
                  <div class="text-xs font-medium text-gray-900">投运</div>
                </div>
              </div>

              <!-- 枪信息 -->
              <div class="space-y-3">
                <div v-for="gun in getFastChargerGuns(i)" :key="gun.id" class="bg-gray-50 rounded-lg p-3 border border-gray-200">
                  <!-- 第一行：左侧枪图标和枪名，右侧枪状态 -->
                  <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-2">
                      <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2L12 6M8 6L16 6C17.1 6 18 6.9 18 8L18 14C18 15.1 17.1 16 16 16L8 16C6.9 16 6 15.1 6 14L6 8C6 6.9 6.9 6 8 6zM12 16L12 22M9 19L15 19"/>
                        </svg>
                      </div>
                      <span class="font-medium text-sm text-gray-900">{{ gun.name }}</span>
                    </div>
                    <div :class="['flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs', gun.status === 'idle' ? 'bg-green-50 border-green-200' : gun.status === 'charging' ? 'bg-orange-50 border-orange-200' : 'bg-red-50 border-red-200']">
                      <div :class="['w-1.5 h-1.5 rounded-full', gun.status === 'idle' ? 'bg-green-500' : gun.status === 'charging' ? 'bg-orange-500' : 'bg-red-500']"></div>
                      <span :class="['font-medium', gun.status === 'idle' ? 'text-green-700' : gun.status === 'charging' ? 'text-orange-700' : 'text-red-700']">
                        {{ gun.status === 'idle' ? '在线' : gun.status === 'charging' ? '充电中' : '故障' }}
                      </span>
                    </div>
                  </div>
                  
                  <!-- 第二行：左侧编号和功率，右侧二维码 -->
                  <div class="flex items-center justify-between">
                    <div class="flex-1">
                      <div class="text-xs text-gray-600 mb-1">编号: {{ gun.qrCode }}</div>
                      <div class="text-xs text-gray-600">功率: {{ gun.power }}</div>
                    </div>
                    <div @click.stop="showQRCode('fast', i, gun.id)" class="cursor-pointer p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
                      <svg class="w-7 h-7 text-gray-500 hover:text-gray-700" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path d="M149.897707 387.566843l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425L393.707231 143.757319C393.707231 94.273016 353.614109 54.179894 304.491005 54.179894L149.897707 54.179894c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099C60.320282 347.473721 100.774603 387.566843 149.897707 387.566843zM136.533333 143.757319c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374l0 154.232099c0 7.223986-6.140388 13.364374-13.364374 13.364374L149.897707 311.353792c-7.223986 0-13.364374-6.140388-13.364374-13.364374L136.533333 143.757319z" fill="currentColor"/>
                        <path d="M304.491005 628.486772 149.897707 628.486772c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099c0 49.484303 40.093122 89.577425 89.577425 89.577425l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425l0-154.232099C393.707231 668.579894 353.614109 628.486772 304.491005 628.486772zM317.49418 872.296296c0 7.223986-6.140388 13.364374-13.364374 13.364374L149.897707 885.66067c-7.223986 0-13.364374-6.140388-13.364374-13.364374l0-154.232099c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374L317.49418 872.296296z" fill="currentColor"/>
                        <path d="M878.797884 54.179894l-154.232099 0c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099c0 49.484303 40.093122 89.577425 89.577425 89.577425l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425L968.375309 143.757319C968.014109 94.273016 927.920988 54.179894 878.797884 54.179894zM891.801058 297.989418c0 7.223986-6.140388 13.364374-13.364374 13.364374l-154.232099 0c-7.223986 0-13.364374-6.140388-13.364374-13.364374L710.840212 143.757319c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374L891.801058 297.989418z" fill="currentColor"/>
                        <path d="M673.997884 552.273721c19.865961 0 36.119929-15.892769 35.75873-36.119929 0-19.865961-15.892769-36.119929-36.119929-36.119929l-126.058554 0L547.578131 338.443739c0-19.865961-15.892769-36.119929-36.119929-35.75873-19.865961 0-36.119929 15.892769-36.119929 36.119929L475.338272 480.395062 96.440212 480.395062c-19.865961 0-36.119929 15.892769-36.119929 36.119929 0 19.865961 15.892769 36.119929 36.119929 36.119929l379.620459 0 0 169.04127c0 19.865961 15.892769 36.119929 36.119929 36.119929s36.119929-15.892769 36.119929-36.119929l0-169.04127L673.997884 552.634921z" fill="currentColor"/>
                        <path d="M932.255379 552.273721c19.865961 0 36.119929-15.892769 35.75873-36.119929 0-19.865961-15.892769-36.119929-36.119929-36.119929l-79.825044 0c-19.865961 0-36.119929 15.892769-36.119929 36.119929 0 19.865961 15.892769 36.119929 36.119929 36.119929L932.255379 552.273721z" fill="currentColor"/>
                        <path d="M511.8194 166.874074c19.865961 0 36.119929-15.892769 36.119929-36.119929L547.93933 88.855026c0-19.865961-15.892769-36.119929-36.119929-35.75873-19.865961 0-36.119929 15.892769-36.119929 36.119929l0 41.899118C476.06067 150.620106 491.953439 166.874074 511.8194 166.874074z" fill="currentColor"/>
                        <path d="M511.8194 849.179541c-19.865961 0-36.119929 15.892769-36.119929 36.119929l0 41.899118c0 19.865961 15.892769 36.119929 36.119929 36.119929s36.119929-15.892769 36.119929-36.119929l0-42.260317C547.93933 865.07231 531.685362 849.179541 511.8194 849.179541z" fill="currentColor"/>
                        <path d="M892.884656 871.573898c0 7.223986-6.140388 13.003175-13.003175 13.003175l-38.648325 0 0 75.129453 38.648325 0c48.761905 0 88.493827-39.731922 88.493827-88.493827l0-43.705115-75.129453 0L893.245855 871.573898z" fill="currentColor"/>
                        <path d="M879.520282 631.015168l-152.426102 0c-48.761905 0-88.493827 39.731922-88.493827 88.493827l0 152.426102c0 48.761905 39.731922 88.493827 88.493827 88.493827l38.648325 0L765.742504 884.938272l-38.648325 0c-7.223986 0-13.003175-6.140388-13.003175-13.003175l0-152.426102c0-7.223986 6.140388-13.003175 13.003175-13.003175l152.426102 0c7.223986 0 13.003175 6.140388 13.003175 13.003175l0 33.591534L968.014109 753.100529l0-33.591534C968.014109 670.74709 928.282187 631.015168 879.520282 631.015168z" fill="currentColor"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 慢充桩 -->
      <div class="bg-white rounded-2xl overflow-hidden box-border">
        <div @click.stop="toggleSlowCharger" class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 transition-colors">
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
            <h2 class="font-medium text-gray-900">慢充桩</h2>
          </div>
          <svg :class="{'rotate-180': slowChargerSelected}" class="w-5 h-5 text-gray-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
          </svg>
        </div>
        
        <div v-show="slowChargerSelected" class="px-4 pb-4 box-border overflow-hidden">
          <!-- 无桩友好提示 -->
          <div v-if="getSlowChargerCount() === 0" class="text-center py-8">
            <!-- 标题 -->
            <div class="text-gray-900 font-medium text-base mb-2">暂无慢充桩</div>
            <!-- 描述 -->
            <div class="text-gray-500 text-sm">该站点目前没有安装慢充桩设备</div>
          </div>
          <div v-else class="space-y-3">
            <div v-for="i in getSlowChargerCount()" :key="`slow-${i}`" class="border border-gray-200 rounded-lg p-3 box-border">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center shadow-sm">
                  <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M17 8l2 2m0 0l2 2m-2-2v4m-4 2H7m4-6l2-2m0 0l2 2m-2-2v4"/>
                  </svg>
                </div>
                <div class="font-semibold text-gray-900">慢充桩 #{{ i.toString().padStart(2, '0') }}</div>
              </div>
              <div class="flex items-center gap-2">
                <button @click.stop="restartPile('slow', i)" class="px-3 py-1 bg-orange-50 text-orange-600 text-xs font-medium rounded-full border border-orange-200 hover:bg-orange-100 transition-colors">
                  重启
                </button>
                <div class="flex items-center gap-2 px-3 py-1 bg-green-50 rounded-full border border-green-200">
                  <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                  <span class="text-xs font-medium text-green-700">在线</span>
                </div>
              </div>
            </div>
            
            <div class="bg-gray-50 rounded p-2 mb-3">
              <div class="text-xs font-medium text-gray-900">设备编码: 20259018230912832{{ i }}</div>
            </div>

            <div class="grid grid-cols-2 gap-2 mb-3">
              <div class="bg-gray-50 rounded p-2">
                <div class="text-xs text-gray-500">品牌</div>
                <div class="text-xs font-medium text-gray-900">星星充电</div>
              </div>
              <div class="bg-gray-50 rounded p-2">
                <div class="text-xs text-gray-500">型号</div>
                <div class="text-xs font-medium text-gray-900">星星交流慢充-7kw</div>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-2 mb-3">
              <div class="bg-gray-50 rounded p-2">
                <div class="text-xs text-gray-500">最大功率</div>
                <div class="text-xs font-medium text-gray-900">14kW</div>
              </div>
              <div class="bg-gray-50 rounded p-2 cursor-pointer hover:bg-gray-100 transition-colors" @click.stop="openPricingModal('slow')">
                <div class="text-xs text-gray-500">计费规则</div>
                <div class="text-xs font-medium text-gray-900 flex items-center gap-1">
                  <span>点击查看详情</span>
                  <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                  </svg>
                </div>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-2 mb-3">
              <div class="bg-gray-50 rounded p-2">
                <div class="text-xs text-gray-500">运营状态</div>
                <div class="text-xs font-medium text-gray-900">正常运营</div>
              </div>
              <div class="bg-gray-50 rounded p-2">
                <div class="text-xs text-gray-500">桩管理状态</div>
                <div class="text-xs font-medium text-gray-900">投运</div>
              </div>
            </div>

            <!-- 枪信息 -->
            <div class="space-y-3">
              <div v-for="gun in getSlowChargerGuns(i)" :key="gun.id" class="bg-gray-50 rounded-lg p-3 border border-gray-200">
                  <!-- 第一行：左侧枪图标和枪名，右侧枪状态 -->
                  <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-2">
                      <div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center">
                        <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2L12 6M8 6L16 6C17.1 6 18 6.9 18 8L18 14C18 15.1 17.1 16 16 16L8 16C6.9 16 6 15.1 6 14L6 8C6 6.9 6.9 6 8 6zM12 16L12 22M9 19L15 19"/>
                        </svg>
                      </div>
                      <span class="font-medium text-sm text-gray-900">{{ gun.name }}</span>
                    </div>
                    <div :class="['flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs', gun.status === 'idle' ? 'bg-green-50 border-green-200' : gun.status === 'charging' ? 'bg-orange-50 border-orange-200' : 'bg-red-50 border-red-200']">
                      <div :class="['w-1.5 h-1.5 rounded-full', gun.status === 'idle' ? 'bg-green-500' : gun.status === 'charging' ? 'bg-orange-500' : 'bg-red-500']"></div>
                      <span :class="['font-medium', gun.status === 'idle' ? 'text-green-700' : gun.status === 'charging' ? 'text-orange-700' : 'text-red-700']">
                        {{ gun.status === 'idle' ? '在线' : gun.status === 'charging' ? '充电中' : '故障' }}
                      </span>
                    </div>
                  </div>
                  
                  <!-- 第二行：左侧编号和功率，右侧二维码 -->
                  <div class="flex items-center justify-between">
                    <div class="flex-1">
                      <div class="text-xs text-gray-600 mb-1">编号: {{ gun.qrCode }}</div>
                      <div class="text-xs text-gray-600">功率: {{ gun.power }}</div>
                    </div>
                    <div @click.stop="showQRCode('slow', i, gun.id)" class="cursor-pointer p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
                      <svg class="w-7 h-7 text-gray-500 hover:text-gray-700" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path d="M149.897707 387.566843l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425L393.707231 143.757319C393.707231 94.273016 353.614109 54.179894 304.491005 54.179894L149.897707 54.179894c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099C60.320282 347.473721 100.774603 387.566843 149.897707 387.566843zM136.533333 143.757319c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374l0 154.232099c0 7.223986-6.140388 13.364374-13.364374 13.364374L149.897707 311.353792c-7.223986 0-13.364374-6.140388-13.364374-13.364374L136.533333 143.757319z" fill="currentColor"/>
                        <path d="M304.491005 628.486772 149.897707 628.486772c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099c0 49.484303 40.093122 89.577425 89.577425 89.577425l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425l0-154.232099C393.707231 668.579894 353.614109 628.486772 304.491005 628.486772zM317.49418 872.296296c0 7.223986-6.140388 13.364374-13.364374 13.364374L149.897707 885.66067c-7.223986 0-13.364374-6.140388-13.364374-13.364374l0-154.232099c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374L317.49418 872.296296z" fill="currentColor"/>
                        <path d="M878.797884 54.179894l-154.232099 0c-49.484303 0-89.577425 40.093122-89.577425 89.577425l0 154.232099c0 49.484303 40.093122 89.577425 89.577425 89.577425l154.232099 0c49.484303 0 89.577425-40.093122 89.577425-89.577425L968.375309 143.757319C968.014109 94.273016 927.920988 54.179894 878.797884 54.179894zM891.801058 297.989418c0 7.223986-6.140388 13.364374-13.364374 13.364374l-154.232099 0c-7.223986 0-13.364374-6.140388-13.364374-13.364374L710.840212 143.757319c0-7.223986 6.140388-13.364374 13.364374-13.364374l154.232099 0c7.223986 0 13.364374 6.140388 13.364374 13.364374L891.801058 297.989418z" fill="currentColor"/>
                        <path d="M673.997884 552.273721c19.865961 0 36.119929-15.892769 35.75873-36.119929 0-19.865961-15.892769-36.119929-36.119929-36.119929l-126.058554 0L547.578131 338.443739c0-19.865961-15.892769-36.119929-36.119929-35.75873-19.865961 0-36.119929 15.892769-36.119929 36.119929L475.338272 480.395062 96.440212 480.395062c-19.865961 0-36.119929 15.892769-36.119929 36.119929 0 19.865961 15.892769 36.119929 36.119929 36.119929l379.620459 0 0 169.04127c0 19.865961 15.892769 36.119929 36.119929 36.119929s36.119929-15.892769 36.119929-36.119929l0-169.04127L673.997884 552.634921z" fill="currentColor"/>
                        <path d="M932.255379 552.273721c19.865961 0 36.119929-15.892769 35.75873-36.119929 0-19.865961-15.892769-36.119929-36.119929-36.119929l-79.825044 0c-19.865961 0-36.119929 15.892769-36.119929 36.119929 0 19.865961 15.892769 36.119929 36.119929 36.119929L932.255379 552.273721z" fill="currentColor"/>
                        <path d="M511.8194 166.874074c19.865961 0 36.119929-15.892769 36.119929-36.119929L547.93933 88.855026c0-19.865961-15.892769-36.119929-36.119929-35.75873-19.865961 0-36.119929 15.892769-36.119929 36.119929l0 41.899118C476.06067 150.620106 491.953439 166.874074 511.8194 166.874074z" fill="currentColor"/>
                        <path d="M511.8194 849.179541c-19.865961 0-36.119929 15.892769-36.119929 36.119929l0 41.899118c0 19.865961 15.892769 36.119929 36.119929 36.119929s36.119929-15.892769 36.119929-36.119929l0-42.260317C547.93933 865.07231 531.685362 849.179541 511.8194 849.179541z" fill="currentColor"/>
                        <path d="M892.884656 871.573898c0 7.223986-6.140388 13.003175-13.003175 13.003175l-38.648325 0 0 75.129453 38.648325 0c48.761905 0 88.493827-39.731922 88.493827-88.493827l0-43.705115-75.129453 0L893.245855 871.573898z" fill="currentColor"/>
                        <path d="M879.520282 631.015168l-152.426102 0c-48.761905 0-88.493827 39.731922-88.493827 88.493827l0 152.426102c0 48.761905 39.731922 88.493827 88.493827 88.493827l38.648325 0L765.742504 884.938272l-38.648325 0c-7.223986 0-13.003175-6.140388-13.003175-13.003175l0-152.426102c0-7.223986 6.140388-13.003175 13.003175-13.003175l152.426102 0c7.223986 0 13.003175 6.140388 13.003175 13.003175l0 33.591534L968.014109 753.100529l0-33.591534C968.014109 670.74709 928.282187 631.015168 879.520282 631.015168z" fill="currentColor"/>
                      </svg>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 重启确认弹窗 -->
  <div v-if="showRestartModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl">
      <!-- 警告图标 -->
      <div class="flex justify-center mb-4">
        <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
          <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
          </svg>
        </div>
      </div>
      
      <!-- 确认信息 -->
      <div class="text-center mb-6">
        <div class="text-lg font-semibold text-gray-900 mb-2">确认重启</div>
        <div class="text-sm text-gray-600 leading-relaxed">{{ restartMessage }}</div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="flex gap-3">
        <button 
          @click="cancelRestart"
          class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
        >
          取消
        </button>
        <button 
          @click="executeRestart"
          class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
        >
          确认
        </button>
      </div>
    </div>
  </div>

  <!-- 计费规则弹窗 -->
  <div v-if="showPricingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl max-h-[80vh] overflow-y-auto">
      <!-- 弹窗标题 -->
      <div class="flex items-center justify-between mb-4">
        <div class="text-lg font-semibold text-gray-900">计费规则</div>
        <button @click="closePricingModal" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
          <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <!-- 时段定义 -->
      <div class="mb-4">
        <div class="text-sm text-gray-600 mb-3">时段划分</div>
        <div class="space-y-2">
          <div class="flex items-center justify-between p-3 bg-gradient-to-r from-red-50 to-orange-50 rounded-lg">
            <div class="flex items-center gap-2">
              <div class="w-2 h-2 bg-red-500 rounded-full"></div>
              <span class="text-sm font-medium text-gray-900">尖</span>
            </div>
            <span class="text-sm text-gray-700">12:00 - 18:00</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg">
            <div class="flex items-center gap-2">
              <div class="w-2 h-2 bg-orange-500 rounded-full"></div>
              <span class="text-sm font-medium text-gray-900">峰</span>
            </div>
            <span class="text-sm text-gray-700">00:00 - 06:00</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg">
            <div class="flex items-center gap-2">
              <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span class="text-sm font-medium text-gray-900">平</span>
            </div>
            <span class="text-sm text-gray-700">18:00 - 24:00</span>
          </div>
          <div class="flex items-center justify-between p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg">
            <div class="flex items-center gap-2">
              <div class="w-2 h-2 bg-green-500 rounded-full"></div>
              <span class="text-sm font-medium text-gray-900">谷</span>
            </div>
            <span class="text-sm text-gray-700">06:00 - 12:00</span>
          </div>
        </div>
      </div>

      <!-- 价格表 -->
      <div>
        <div class="text-sm text-gray-600 mb-3">价格标准</div>
        <div class="grid grid-cols-2 gap-3">
          <div class="bg-gray-50 rounded-lg p-3">
            <div class="text-xs text-gray-600 mb-2">电费单价 (元/度)</div>
            <div class="space-y-1">
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">尖</span>
                <span class="text-sm font-medium text-gray-900">¥0.9</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">峰</span>
                <span class="text-sm font-medium text-gray-900">¥0.9</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">平</span>
                <span class="text-sm font-medium text-gray-900">¥0.9</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">谷</span>
                <span class="text-sm font-medium text-gray-900">¥0.9</span>
              </div>
            </div>
          </div>
          <div class="bg-gray-50 rounded-lg p-3">
            <div class="text-xs text-gray-600 mb-2">服务费单价 (元/度)</div>
            <div class="space-y-1">
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">尖</span>
                <span class="text-sm font-medium text-gray-900">¥0.4</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">峰</span>
                <span class="text-sm font-medium text-gray-900">¥0.4</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">平</span>
                <span class="text-sm font-medium text-gray-900">¥0.4</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-500">谷</span>
                <span class="text-sm font-medium text-gray-900">¥0.4</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <!-- 二维码弹窗 -->
  <div v-if="showQRModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-2xl p-8 w-full max-w-sm mx-4 shadow-2xl relative">
      <!-- 右上角关闭按钮 -->
      <button 
        @click="closeQRModal"
        class="absolute top-4 right-4 p-1 text-gray-400 hover:text-gray-600 transition-colors"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
      
      <!-- 二维码 -->
      <div class="flex justify-center">
        <div class="w-48 h-48 bg-black rounded-lg" style="background-image: repeating-linear-gradient(0deg, #000 0px, #000 2px, #fff 2px, #fff 4px), repeating-linear-gradient(90deg, #000 0px, #000 2px, #fff 2px, #fff 4px); background-size: 4px 4px;"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 统一选中状态管理（控制卡片颜色和列表展开）
const superChargerSelected = ref(false)
const fastChargerSelected = ref(false)
const slowChargerSelected = ref(true)

// 列表标题点击功能（独立多选模式）
const toggleSuperCharger = () => {
  console.log('toggleSuperCharger clicked, current state:', superChargerSelected.value)
  // 切换选中状态（同时控制列表展开和卡片颜色）
  superChargerSelected.value = !superChargerSelected.value
  console.log('toggleSuperCharger new state:', superChargerSelected.value)
}

// 重启弹窗相关
const showRestartModal = ref(false)
const restartMessage = ref('')
const restartAction = ref(null)

// 计费规则弹窗相关
const showPricingModal = ref(false)
const currentPricingType = ref('')

// 二维码弹框相关
const showQRModal = ref(false)
const currentQRCode = ref('')

// 桩数量函数
const getSuperChargerCount = () => {
  return 0 // 暂时设为0，用于测试友好提示
}

const getFastChargerCount = () => {
  return 6
}

const getSlowChargerCount = () => {
  return 8
}

// 枪信息数据结构
const getSuperChargerGuns = (index) => {
  return [
    {
      id: 1,
      name: 'A枪',
      power: '60kW',
      qrCode: '20250984908091',
      status: 'idle',
      price: '1.8元/度'
    },
    {
      id: 2,
      name: 'B枪', 
      power: '60kW',
      qrCode: '20250984908092',
      status: 'charging',
      price: '1.8元/度'
    }
  ]
}

const getFastChargerGuns = (index) => {
  return [
    {
      id: 1,
      name: 'A枪',
      power: '30kW',
      qrCode: '20250984908093',
      status: 'idle',
      price: '1.2元/度'
    },
    {
      id: 2,
      name: 'B枪',
      power: '30kW', 
      qrCode: '20250984908094',
      status: 'idle',
      price: '1.2元/度'
    }
  ]
}

const getSlowChargerGuns = (index) => {
  return [
    {
      id: 1,
      name: 'A枪',
      power: '7kW',
      qrCode: '20250984908095',
      status: 'idle',
      price: '0.8元/度'
    }
  ]
}

// 重启充电桩功能
const restartPile = (type, index) => {
  const typeNames = {
    'super': '超充桩',
    'fast': '快充桩', 
    'slow': '慢充桩'
  }
  const pileName = typeNames[type] || '充电桩'
  const pileNumber = index.toString().padStart(2, '0')
  
  const message = `确定要重启 "${pileName} #${pileNumber}" 吗？`
  const action = async () => {
    try {
      console.log(`正在重启${pileName} #${pileNumber}...`)
      
      // 这里可以添加重启API调用
      // await restartPileAPI(type, index)
      
      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 显示成功提示
      showSuccess(`${pileName} #${pileNumber} 重启成功！`)
      
    } catch (error) {
      console.error('重启失败:', error)
      showError(`${pileName} #${pileNumber} 重启失败，请重试`)
    }
  }
  
  showRestartConfirm(message, action)
}

// 显示重启确认弹窗
const showRestartConfirm = (message, action) => {
  restartMessage.value = message
  restartAction.value = action
  showRestartModal.value = true
}

// 执行重启
const executeRestart = async () => {
  if (restartAction.value) {
    await restartAction.value()
  }
  showRestartModal.value = false
  restartMessage.value = ''
  restartAction.value = null
}

// 取消重启
const cancelRestart = () => {
  showRestartModal.value = false
  restartMessage.value = ''
  restartAction.value = null
}

// 显示成功提示
const showSuccess = (message) => {
  // 创建临时成功提示
  const successToast = document.createElement('div')
  successToast.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2 transform transition-all duration-300 translate-x-full'
  successToast.innerHTML = `
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span>${message}</span>
  `
  document.body.appendChild(successToast)
  
  // 触发动画
  setTimeout(() => {
    successToast.classList.remove('translate-x-full')
    successToast.classList.add('translate-x-0')
  }, 100)
  
  // 3秒后自动移除
  setTimeout(() => {
    successToast.classList.remove('translate-x-0')
    successToast.classList.add('translate-x-full')
    setTimeout(() => {
      document.body.removeChild(successToast)
    }, 300)
  }, 3000)
}

// 显示错误提示
const showError = (message) => {
  // 创建临时错误提示
  const errorToast = document.createElement('div')
  errorToast.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2 transform transition-all duration-300 translate-x-full'
  errorToast.innerHTML = `
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
    <span>${message}</span>
  `
  document.body.appendChild(errorToast)
  
  // 触发动画
  setTimeout(() => {
    errorToast.classList.remove('translate-x-full')
    errorToast.classList.add('translate-x-0')
  }, 100)
  
  // 3秒后自动移除
  setTimeout(() => {
    errorToast.classList.remove('translate-x-0')
    errorToast.classList.add('translate-x-full')
    setTimeout(() => {
      document.body.removeChild(errorToast)
    }, 300)
  }, 3000)
}

// 打开计费规则弹窗
const openPricingModal = (type) => {
  currentPricingType.value = type
  showPricingModal.value = true
}

// 关闭计费规则弹窗
const closePricingModal = () => {
  showPricingModal.value = false
  currentPricingType.value = ''
}

// 显示二维码弹框
const showQRCode = (type, pileIndex, gunId) => {
  showQRModal.value = true
}

// 关闭二维码弹框
const closeQRModal = () => {
  showQRModal.value = false
}

const toggleFastCharger = () => {
  console.log('toggleFastCharger clicked, current state:', fastChargerSelected.value)
  // 切换选中状态（同时控制列表展开和卡片颜色）
  fastChargerSelected.value = !fastChargerSelected.value
  console.log('toggleFastCharger new state:', fastChargerSelected.value)
}

const toggleSlowCharger = () => {
  console.log('toggleSlowCharger clicked, current state:', slowChargerSelected.value)
  // 切换选中状态（同时控制列表展开和卡片颜色）
  slowChargerSelected.value = !slowChargerSelected.value
  console.log('toggleSlowCharger new state:', slowChargerSelected.value)
}

// 统计卡片点击功能（独立多选模式）
const selectSuperCharger = () => {
  console.log('selectSuperCharger clicked')
  // 切换选中状态（同时控制卡片颜色和列表展开）
  superChargerSelected.value = !superChargerSelected.value
}

const selectFastCharger = () => {
  console.log('selectFastCharger clicked')
  // 切换选中状态（同时控制卡片颜色和列表展开）
  fastChargerSelected.value = !fastChargerSelected.value
}

const selectSlowCharger = () => {
  console.log('selectSlowCharger clicked')
  // 切换选中状态（同时控制卡片颜色和列表展开）
  slowChargerSelected.value = !slowChargerSelected.value
}
</script>